/*in*/
/*first*/
@keyframes iconFirstIn
{
    0% {
        transform: rotate(0deg);
        top: 12px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        -webkit-transform:translateY(0px) rotate(-45deg);
        transform:translateY(0px) rotate(-45deg);
        top:20px;
    }
}
@-moz-keyframes iconFirstIn
{
    0% {
        transform: rotate(0deg);
        top: 12px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        -webkit-transform:translateY(0px) rotate(-45deg);
        transform:translateY(0px) rotate(-45deg);
        top:20px;
    }
}
@-webkit-keyframes iconFirstIn
{
    
    0% {
        transform: rotate(0deg);
        top: 12px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        -webkit-transform:translateY(0px) rotate(-45deg);
        transform:translateY(0px) rotate(-45deg);
        top:20px;
    }
}
/*last*/
@keyframes iconLastIn
{
    0% {
        transform: rotate(0deg);
        top: 28px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        -webkit-transform:translateY(0px) rotate(45deg);
        transform:translateY(0px) rotate(45deg);
        top:20px;
    }
}
@-moz-keyframes iconLastIn
{
    0% {
        transform: rotate(0deg);
        top: 28px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        -webkit-transform:translateY(0px) rotate(45deg);
        transform:translateY(0px) rotate(45deg);
        top:20px;
    }
}
@-webkit-keyframes iconLastIn
{
    
    0% {
        transform: rotate(0deg);
        top: 28px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        -webkit-transform:translateY(0px) rotate(45deg);
        transform:translateY(0px) rotate(45deg);
        top:20px;
    }
}
/*Second*/
@keyframes iconSecondIn
{
    from {
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@-moz-keyframes iconSecondIn
{
    from {
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@-webkit-keyframes iconSecondIn
{
    from {
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
/*==================*/
/*out*/
/*first*/
@keyframes iconFirstOut
{
    0% {
        -webkit-transform:translateY(0px) rotate(-45deg);
        transform:translateY(0px) rotate(-45deg);
        top:20px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        transform: rotate(0deg);
        top: 12px;
    }
}
@-moz-keyframes iconFirstOut
{
    0% {
        -webkit-transform:translateY(0px) rotate(-45deg);
        transform:translateY(0px) rotate(-45deg);
        top:20px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        transform: rotate(0deg);
        top: 12px;
    }
}
@-webkit-keyframes iconFirstOut
{
    0% {
        -webkit-transform:translateY(0px) rotate(-45deg);
        transform:translateY(0px) rotate(-45deg);
        top:20px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        transform: rotate(0deg);
        top: 12px;
    }
}
/*last*/
@keyframes iconLastOut
{
    0% {
        -webkit-transform:translateY(0px) rotate(45deg);
        transform:translateY(0px) rotate(45deg);
        top:20px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        transform: rotate(0deg);
        top: 28px;
    }
}
@-moz-keyframes iconLastOut
{
    0% {
        -webkit-transform:translateY(0px) rotate(45deg);
        transform:translateY(0px) rotate(45deg);
        top:20px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        transform: rotate(0deg);
        top: 28px;
    }
}
@-webkit-keyframes iconLastOut
{
    0% {
        -webkit-transform:translateY(0px) rotate(45deg);
        transform:translateY(0px) rotate(45deg);
        top:20px;
    }
    25%,75% {
        transform: rotate(0deg);
        top:20px;
    }
    to{
        transform: rotate(0deg);
        top: 28px;
    }
}
/*Second*/
@keyframes iconSecondOut
{
    from {
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@-moz-keyframes iconSecondOut
{
    from {
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@-webkit-keyframes iconSecondOut
{
    from {
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
/*down*/
@keyframes iconDown
{
    0% {
        top: -25px
    }
    50%{
        top: -20px
    }
    to{
        top: -25px
    }
}
@-moz-keyframes iconDown
{
    0% {
        top: -25px
    }
    50%{
        top: -20px
    }
    to{
        top: -25px
    }
}
@-webkit-keyframes iconDown
{
    0% {
        top: -25px
    }
    50%{
        top: -20px
    }
    to{
        top: -25px
    }
}
/*ball*/
@keyframes iconBall
{
    0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);   
    }
    to{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);   
    }
}
@-moz-keyframes iconBall
{
    0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);   
    }
    to{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);   
    }
}
@-webkit-keyframes iconBall
{
    0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);   
    }
    to{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);   
    }
}
@-webkit-keyframes arrow {
    0% {
    opacity:0;
    -webkit-transform:translate(0, 0px) rotate(45deg)
}
50% {
    opacity:1;
    -webkit-transform:translate(0, -5px) rotate(45deg)
}
100% {
    opacity:0;
    -webkit-transform:translate(0, -10px) rotate(45deg)
}
}
/*img*/
@keyframes Twinkle
{
    0% {
        opacity: 0
    }
    50%{
        opacity: 1
    }
    100%{
        opacity: 0;
    }
}
@-moz-keyframes Twinkle
{
    0% {
        opacity: 0
    }
    50%{
        opacity: 1
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes Twinkle
{
    0% {
        opacity: 0
    }
    50%{
        opacity: 1
    }
    100%{
        opacity: 0;
    }
}

/*nav*/

@keyframes back
{
    from {
        background-position:0px bottom;
    }
    to {
        background-position:2337px bottom;
    }
}

@-moz-keyframes back /* Firefox */
{
    from {
        background-position:0px bottom;
    }
    to {
        background-position:2337px bottom;
    }
}

@-webkit-keyframes back /* Safari 和 Chrome */
{
    from {
        background-position:0px bottom;
    }
    to {
        background-position:2337px bottom;
    }
}

/*tilt*/

@keyframes tiltImg
{
    from {
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    20% {
        transform:rotate(10deg);
        -moz-transform:rotate(10deg);   
        -webkit-transform:rotate(10deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    40% {
        transform:rotate(10deg);
        -moz-transform:rotate(10deg);   
        -webkit-transform:rotate(10deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    60%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    100%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
}

@-moz-keyframes tiltImg /* Firefox */
{
    from {
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    20% {
        transform:rotate(10deg);
        -moz-transform:rotate(10deg);   
        -webkit-transform:rotate(10deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    40% {
        transform:rotate(10deg);
        -moz-transform:rotate(10deg);   
        -webkit-transform:rotate(10deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    60%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    100%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
}

@-webkit-keyframes tiltImg /* Safari 和 Chrome */
{
    from {
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    20% {
        transform:rotate(10deg);
        -moz-transform:rotate(10deg);   
        -webkit-transform:rotate(10deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    40% {
        transform:rotate(10deg);
        -moz-transform:rotate(10deg);   
        -webkit-transform:rotate(10deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    60%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
    100%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);   
        -webkit-transform:rotate(0deg);
        transform-origin:right bottom;
        -moz-transform-origin:right bottom;
        -webkit-transform-origin:right bottom;
    }
}